/*
 * @Description: 修改密码
 * @Author: wangding
 * @Date: 2022-11-15 15:57:08
 * @Last Modified by: wangding
 * @Last Modified time: 2022-12-15 09:01:56
 */
<template>
    <div class="edit-password-modal">
        <el-dialog
        :title="$t('modify password')"
        :visible.sync="editPassVisible"
        :close-on-click-modal="false"
        width="750px"
        :before-close='closeModal'
        @close='closeModal'
        :show-close="!qzxgFalg"
        :close-on-press-escape="false"
        >
            <el-form :rules="rules" ref="ruleForm" :model="form" class="pop-form-box">
                <el-row :gutter="24">
                    <el-col :span="24">
                        <!--用户名-->
                        <el-form-item :label="$t('username')">
                            <el-input v-model="form.userName" type="text" disabled=""></el-input>
                        </el-form-item>
                        <!--旧密码-->
                        <el-form-item :label="$t('Old password')" prop="oldPassword">
                            <el-input autocomplete="new-password" v-model="form.oldPassword" type="password" show-password></el-input>
                        </el-form-item>
                        <!--新密码-->
                        <el-form-item :label="$t('new password')" prop="newPassword">
                            <el-input autocomplete="new-password" v-model="form.newPassword" type="password" show-password></el-input>
                        </el-form-item>
                        <!--确认新密码-->
                        <el-form-item :label="$t('Confirm new password')" prop="passwordAck">
                            <el-input autocomplete="new-password" v-model="form.passwordAck" type="password" show-password></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
          <br>
          <br>
            <div class="footBtnBox">
                <el-button size="small" type="handle" @click="closeModal" v-if="!qzxgFalg">{{this.i18n.t('Cancel')}}</el-button>
                <el-button size="small" type="primary"  @click="save">{{this.i18n.t('save')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script >
// 引入接口
import { logout,cachestroeSet,cachestroeGet } from '@/api/login.js';
import {accountinfoChangepassword} from "@/api/zhgl";
import { getLocalUserInfo,removeLocalUserInfo } from "@/assets/common/js/global";
// 加密
const Base64 = require("js-base64").Base64;
export default {
    components: {

    },
    props: {
        editPassVisible:{
            type:Boolean,
            default:false
        },
        // 用户信息
        userDetail:{
            type:Object,
            default:()=>{
                return {};
            }
        },
        qzxgFalg:{
            type:Boolean,
            default:false
        }
    },
    data() {
        var validatePasswordAck = (rule, value, callback) => {
            // debugger
            console.log(value);
            if (value == ''||value==undefined) {
                // 请再次输入密码
                callback(new Error(this.i18n.t('Please enter your password again')));
            }else if(!this.$rules.password.reg.test(value)){
                callback(new Error(this.i18n.t('Only English and numbers can be entered')+' '+this.$rules.password.errMsg+" " + this.$rules.password.min + '~' + this.$rules.password.max + ' ' + this.i18n.t('bits')));
            }else if (value!=this.form.newPassword) {
                // 两次输入密码不一致
                callback(new Error(this.i18n.t('The two password does not match！')));
            }else {
                callback();
            }
        };
        var validateNewPassword = (rule, value, callback) => {
            // debugger
            console.log(value);
            if (value == ''||value==undefined) {
                // 请输入新密码
                callback(new Error(this.i18n.t('Please enter a new password')));
            }else if(value==this.form.userName){
                // 新密码不能和用户名相同
                callback(new Error(this.i18n.t('The new password cannot be the same as the username')));
            }
            else if (!this.$rules.password.reg.test(value)) {
                callback(new Error(this.i18n.t('Only English and numbers can be entered')+' '+this.$rules.password.errMsg+" " + this.$rules.password.min + '~' + this.$rules.password.max + ' ' + this.i18n.t('bits')));
            }else {
                callback();
            }
        };
        var validateOldPassword = (rule, value, callback) => {
            // debugger
            console.log(value);
            if (value == ''||value==undefined) {
                // 请输入旧密码
                callback(new Error(this.i18n.t('Please enter your old password')));
            }else if (!this.$rules.password.reg.test(value)) {
                callback(new Error(this.i18n.t('Only English and numbers can be entered')+' '+this.$rules.password.errMsg+" " + this.$rules.password.min + '~' + this.$rules.password.max + ' ' + this.i18n.t('bits')));
            }else {
                callback();
            }
        };
        return {
            form:{
                userName:'',
                oldPassword:'',
                newPassword:'',
                passwordAck:'',
            },
            rules: {
                passwordAck:[
                    { validator: validatePasswordAck,required: true, trigger: 'blur' }
                ],
                newPassword:[
                    { validator: validateNewPassword,required: true, trigger: 'blur' }
                ],
                oldPassword:[
                    { validator: validateOldPassword,required: true, trigger: 'blur' }
                ]
            },
            disabledFlag:false
        };
    },
    computed: {

    },
    watch: {

    },
    async mounted() {
        var res=await this.cachestroeGet('userInfo')
        console.log(166,res);
        this.form.userName=res.data.username
    },
    methods: {
        // 获取缓存
        cachestroeGet(key){
            return cachestroeGet(key)
        },
        // 设置缓存
        cachestroeSet(params){
            cachestroeSet(params).then((res) => {
                if (res.code === 200) {

                }
            }).catch(err => {

            }).finally(() => {

            })
        },
        // 修改密码
        accountinfoChangepassword(params) {
            accountinfoChangepassword(params).then((res) => {
                if (res.code == 200) {
                    // 设置记住密码的状态
                    this.cachestroeSet({"key":"remPwd","value":"0"})
                    // 密码修改成功，请使用新密码重新登陆
                    this.W.$tips("success", this.i18n.t('Prompt for successful password modification'));
                    logout()
                    removeLocalUserInfo()
                    this.$router.replace('/login');
                }
            }).catch().finally(() => {
            })
        },
        // 保存
        save(){
            this.$refs.ruleForm.validate( async valid => {
                if (valid) {
                    console.log(this.form);
                    this.accountinfoChangepassword(this.form)
                }
            })
        },
        // 关闭弹框
        closeModal(){
            this.$emit('update:editPassVisible',false)
        }
    }
};
</script>

<style scoped lang="scss">
.edit-password-modal{
    ::v-deep .yzm-code-box{
        .el-form-item__content{
            display: flex;
            .el-input{
                width: calc(100% - 120px);
                margin-right: 16px;
            }
        }

    }
}
</style>
